<template>
    <div>

        <a-modal v-model="visible" on-ok="handleOk" @cancel="change11" style="width: 300px;" footer="">

            <a-tabs>
                <a-tab-pane key="1" tab="忘记密码" >
                    <a-form :form="form" @submit="handleSubmit">
                        <a-form-item v-bind="formItemLayout" >
                            <a-input
                                    placeholder="请输入账号"
                                    v-decorator="[
          'email',
          {
            rules: [
              {
                type: 'email',
                message: 'The input is not valid E-mail!',
              },
              {
                required: true,
                message: 'Please input your E-mail!',
              },
            ],
          },
        ]"
                            />
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" has-feedback>
                            <a-input
                                    placeholder="请输入密码"
                                    v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: 'Please input your password!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
                                    type="password"
                            />
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout"  has-feedback>
                            <a-input
                                    placeholder="请输入确认密码"
                                    v-decorator="[
          'confirm',
          {
            rules: [
              {
                required: true,
                message: 'Please confirm your password!',
              },
              {
                validator: compareToFirstPassword,
              },
            ],
          },
        ]"
                                    type="password"
                                    @blur="handleConfirmBlur"
                            />
                        </a-form-item>

                        <a-form-item v-bind="formItemLayout" >
                            <a-input
                                    placeholder="请输入手机号"
                                    v-decorator="[
          'phone',
          {
            rules: [{ required: true, message: 'Please input your phone number!' }],
          },
        ]"
                                    style="width: 100%"
                            >
                                <a-select
                                        slot="addonBefore"

                                        v-decorator="['prefix', { initialValue: '86' }]"
                                        style="width: 70px"
                                >
                                    <a-select-option value="86">
                                        +86
                                    </a-select-option>
                                    <a-select-option value="87">
                                        +87
                                    </a-select-option>
                                </a-select>
                            </a-input>
                        </a-form-item>

                        <a-form-item
                                v-bind="formItemLayout"

                                extra="We must make sure that your are a human."
                        >
                            <a-row :gutter="8">
                                <a-col :span="12">
                                    <a-input
                                            v-decorator="[
              'captcha',
              { rules: [{ required: true, message: 'Please input the captcha you got!' }] },
            ]"
                                    />
                                </a-col>
                                <a-col :span="12">
                                    <a-button style="background-color: #42b983; color: white;">获取验证码</a-button>
                                </a-col>
                            </a-row>
                        </a-form-item>

                        <a-form-item v-bind="tailFormItemLayout">
                            <a-button type="primary" html-type="submit" style="width: 200px;">
                                确认更改
                            </a-button>
                        </a-form-item>
                        <a href="#" @click="register">
                            立即注册！
                        </a>
                        <a class="login-form-forgot" href="#" @click="login">
                            去登录
                        </a>
                    </a-form>
                </a-tab-pane>
            </a-tabs>
        </a-modal>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                loading: false,
                confirmDirty: false,
                form:null,
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 8 },
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 16 },
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 0,
                        },
                        sm: {
                            span: 16,
                            offset: 8,
                        },
                    },
                },
            };
        },

        methods: {
            change11() {
                this.$store.commit("changeShowForget", false)
            },
            handleOk() {
                this.loading = true;
                setTimeout(() => {
                    this.$store.commit("changeShowForget", false)

                    this.loading = false;
                }, 3000);
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFieldsAndScroll((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },
            compareToFirstPassword(rule, value, callback) {
                const form = this.form;
                if (value && value !== form.getFieldValue('password')) {
                    callback('Two passwords that you enter is inconsistent!');
                } else {
                    callback();
                }
            },
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], { force: true });
                }
                callback();
            },
            register(){
                this.$store.commit("changeShowRegis",true);
                this.$store.commit("changeShowForget",false);


            },
            login(){
                this.$store.commit("change",true);
                this.$store.commit("changeShowForget",false);
            }

        },



        computed: {
            visible: {
                get: function () {
                    return this.$store.state.showForget;
                },
                set: (i) => {
                    console.log(i)
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    /deep/ .ant-tabs{
        width: 300px;
        /*margin-left: 0;*/
    }
    /deep/.ant-modal-content{
        width: 360px;
        margin: 0 auto;
    }
    /deep/ .ant-tabs-bar, .ant-tabs-top-bar {
        text-align: center;

    }

    /deep/ .ant-tabs-nav, .ant-tabs-nav-animated {
        /*width: 100%;*/
        text-align: center;
    }

    /deep/ .ant-tabs-tab {
        width: 300px;
    }

    /deep/ .ant-form-item-label{
        width: 100px;
    }
    /deep/ .ant-checkbox-wrapper{
        margin-left: -120px;
    }
    /deep/ .ant-btn-primary {

        margin-left: -100px;
    }
    /deep/.ant-form-item-control{
        width: 300px;
    }
    /deep/ .ant-form-item{
        margin-bottom: 10px;
    }
    .login-form-forgot {
        float: right;
    }
</style>